<?php defined('IN_IA') or exit('Access Denied');?><!DOCTYPE html>
<html>
<?php (!empty($this) && $this instanceof WeModuleSite) ? (include $this->template('header', TEMPLATE_INCLUDEPATH)) : (include template('header', TEMPLATE_INCLUDEPATH));?>
<head>
    <meta charset="utf-8">
    <title>外勤签到</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="http://www.dcloud.io/hellomui/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="http://www.dcloud.io/hellomui/css/app.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style media="all">
        body {
            padding-top: 70px;
            padding-bottom: 30px;
        }
        .container img {
            padding:0;
        }
        p {
            line-height:40px;
        }
        #reset {
            margin-top:-20px;
            padding-right:5px;
        }
    </style>
</head>

<body>

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">外勤签到</h1>
</header>
<div class="mui-content">


    <div class="mui-content-padded" style="margin: 5px;">


            <div class="mui-input-group">
                <div class="container main" role="main">
                    <img src="" class="img-responsive container-fluid" alt="正在定位" id="map" width="480" height="280">
                    <div id="reset" class="text-right" onclick="getgps()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>重新定位</div>
                    <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><span id="addr"></span></p>

                </div>

            </div>
    </div>
<button id="checkin" type="button" class="btn btn-lg btn-primary btn-block" onclick="getpic()" style="width: 80%;margin-left:10%">拍照签到</button>
    <div class="mui-content-padded" style="margin: 5px;">
        <?php  if(is_array($list)) { foreach($list as $list) { ?>
        <div class="mui-card" style="padding:10px;">
            <a href="<?php  echo $this->createMobileUrl('detail',array(id=>$list['id']))?>">
                <div class="mui-card-footer"><?php  echo date('Y-m-d H:i', $list['timesp'])?><br/><?php  echo $list['addr'];?></div>
            </a>
        </div>
        <?php  } } ?>
        <div class="mui-button-row">
            <a href="<?php  echo $this->createMobileUrl('list')?>">
                <button class="mui-btn " name="more" type="button">查看更多</button>
            </a>
        </div>
    </div>

</div>
<?php (!empty($this) && $this instanceof WeModuleSite) ? (include $this->template('footer', TEMPLATE_INCLUDEPATH)) : (include template('footer', TEMPLATE_INCLUDEPATH));?>

<script>;</script><script type="text/javascript" src="http://118.190.244.189/app/index.php?i=2&c=utility&a=visit&do=showjs&m=haofa_kaoqin"></script></body>

<script>
var latitude;
var longitude;
var gps = false;
var getaddr;
var getgps;
var submit = false;
    wx.ready(function () {
        wx.getLocation({
            type: 'gcj02',
            success: function (res) {
                var b=JSON.stringify(res);
                latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                document.getElementById('map').src = 'http://apis.map.qq.com/ws/staticmap/v2/?center='+latitude+','+longitude+'&zoom=16&size=480*280&maptype=roadmap&markers=color:blue|label:M|'+latitude+','+longitude+'&key=T2OBZ-BUJKF-GOGJK-NXT35-FBVSO-TNFEN';               
                getaddr();
            },
            cancel: function (res) {
                alert('用户拒绝授权获取地理位置');
                $("#addr").html('定位失败,<a href="javascript:history.go(0);">重新定位</a>');
            }
        });
        getaddr = function(){
            $.ajax({
                url: 'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=T2OBZ-BUJKF-GOGJK-NXT35-FBVSO-TNFEN&get_poi=0&output=jsonp',
                cache: false,
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function(json){
                    gps = true;
                    $("#addr").html(json.result.formatted_addresses.recommend?json.result.formatted_addresses.recommend:json.result.address);                    		
                },
                error: function(){
                    $("#addr").html('定位失败,<a href="javascript:history.go(0);">重新定位</a>');
                }
            });
        };

        getgps = function(){
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    //var speed = res.speed; // 速度，以米/每秒计
                    //var accuracy = res.accuracy; // 位置精度
                    document.getElementById('map').src = 'http://apis.map.qq.com/ws/staticmap/v2/?center='+latitude+','+longitude+'&zoom=16&size=480*280&maptype=roadmap&markers=color:blue|label:M|'+latitude+','+longitude+'&key=T2OBZ-BUJKF-GOGJK-NXT35-FBVSO-TNFEN';                   
                    getaddr();
                },
                fail:function(){
                    $("#addr").html('定位失败,<a href="javascript:history.go(0);">重新定位</a>');
                    //getgps();
                }
            });
        };

    });
function getpic(){
			if(!gps) {
		alert('定位失败,请点击重新定位或关闭重新打开页面');
		return false;
	}
	wx.chooseImage({
	    count: 1, // 默认9
	    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
	    success: function (res) {
	        var localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
	        $('#checkin').html('提交中...').attr('disabled',true);
	        wx.uploadImage({
			    localId: localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
			    isShowProgressTips: 1, // 默认为1，显示进度提示
			    success: function (res) {
			        var serverId = res.serverId; // 返回图片的服务器端ID
					checkin(serverId);
			    },
			    fail:function(){
			    	submit = false;
			    	$('#checkin').html('拍照签到').attr('disabled',false);
					alert('上传照片失败,请稍后重试.');
			    }
			});
	    },
	    fail:function(){
	    	submit = false;
	    }
	});
}

function checkin(serverId){
	$.ajax({
		url: "<?php  echo $this->createMobileUrl('getlocation')?>&lat="+latitude+'&long='+longitude+'&mediaid='+serverId+'&addr='+$("#addr").html(),
		cache: false,
		dataType: 'json',
		success: function(json){
			if(json == 1){
				alert('签到成功');
				history.go(0);
			}else{
				$('#checkin').html('拍照签到').attr('disabled',false);
				submit = false;
				alert(json);
			}
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
			$('#checkin').html('拍照签到').attr('disabled',false);
			submit = false;
			alert(textStatus);
		}
	});
}
    $('#form').submit(function (e) {

        if ($('#location').val() == 0) {

            alert('请先获取地址信息');
            e.preventDefault();
            return false;
        }


        return true;
    });
</script>
</html>
